<style>
  .elastic-scale-in, .elastic-scale-out {
    animation-timing-function: cubic-bezier(0, 1.14, .21, 1.19);
  }
  .elastic-scale-in {
    -webkit-animation-name: elastic-scale-in;
    animation-name: elastic-scale-in;
  }
  @keyframes elastic-scale-in {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }
  @-webkit-keyframes elastic-scale-in {
    from {
      -webkit-transform: scale(0);
    }
    to {
      -webkit-transform: scale(1);
    }
  }
  .elastic-scale-out {
    -webkit-animation-name: elastic-scale-out;
    animation-name: elastic-scale-out;
  }
  @keyframes elastic-scale-out {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(0);
    }
  }
  @-webkit-keyframes elastic-scale-out {
    from {
      -webkit-transform: scale(1);
    }
    to {
      -webkit-transform: scale(0);
    }
  }
</style>

<template>
  <transition
    :name="name"
    :enter-active-class="enterClass"
    :leave-active-class="leaveClass">
    <slot></slot>
  </transition>
</template>

<script>
  const transitions = {
    'fade': {
      enterClass: 'animated fadeIn',
      leaveClass: 'animated fadeOut'
    },
    'elastic-scale': {
      enterClass: 'animated elastic-scale-in',
      leaveClass: 'animated elastic-scale-out'
    }
  };
  const noop = () => {};
  export default {
    props: {
      name: {
        type: String,
        default: 'fade'
      }
    },
    computed: {
      enterClass() {
        if (transitions[this.name]) {
          return transitions[this.name].enterClass;
        }
        return `${this.name}-enter-active`;
      },
      leaveClass() {
        if (transitions[this.name]) {
          return transitions[this.name].leaveClass;
        }
        return `${this.name}-leave-active`;
      }
    }
  }
</script>
